<template>
    <svg
        :class="'icon-svg ' + className"
        :style="{
            'vertical-align': align
        }"
        @click="$emit('click')"
        aria-hidden="true">
        <use :xlink:href="'#icon-' + name"></use>
    </svg>
</template>

<script>
    export default {
      name: 'c-icon',
      props: {
        name: String,
        className: {
          type: String,
          default: ''
        },
        align: {
          type: String,
          default: '-0.15em'
        }
      }
    }
</script>

<style>
    .icon-svg {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: #fff;
        overflow: hidden;
        cursor: pointer;
    }

    .icon-large{
        font-size: 24px;
    }

    .icon-huge{
        font-size: 42px;
        margin-bottom: 5px;
    }

    .icon-ship{
        font-size: 54px;
    }

    .margin-r-6{
        margin-right: 6px;
    }
</style>